<template>
  <div class="container">
    <el-form :rules='rules' ref="form" :model="form" label-width="80px" size="mini">
      <el-form-item label="学科" prop="subjectID">
        <el-select v-model="form.subjectID" placeholder="请选择">
          <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录" prop="catalogID">
        <el-select v-model="form.catalogID" placeholder="请选择">
          <el-option v-for="item in catalogueList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> </el-form-item
      >
      <el-form-item label="企业" prop="enterpriseID">
        <el-select v-model="form.enterpriseID" placeholder="请选择">
          <el-option v-for="item in companysList" :key="item.id" :label="item.shortName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="province">
        <el-select v-model="form.province" placeholder="请选择" @change="handleProvince">
          <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      <el-select v-model="form.city" placeholder="请选择">
        <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="方向"  prop="direction">
        <el-select v-model="form.direction" placeholder="请选择">
          <el-option
            v-for="item in direction"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题型"  prop="questionType">
        <el-radio-group v-model="form.questionType">
          <el-radio
            v-for="item in questionType"
            :key="item.value"
            :label="item.value"
          >{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度"  prop="difficulty">
        <el-radio-group v-model="form.difficulty">
          <el-radio
            v-for="item in difficulty"
            :key="item.value"
            :label="item.value"
          >{{item.label}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="question">题干：<quillEditor class="questionStem" v-model="form.question"></quillEditor></div>
      <el-form-item v-if="form.questionType!=='3'" label="选择">
          <!-- <div class="option" v-for="item in form.options" :key="item.id" > -->
            <el-row class="rowStyle" type="flex" :gutter="20" v-for="item in form.options" :key="item.id" >
               <el-col :span="3" v-if="form.questionType==='1'">
                <el-radio :label="true"  v-model="item.isRight" @input="inputOption(item.id)">{{item.code}}</el-radio>
               </el-col>
              <el-col :span="3"  v-else-if="form.questionType==='2'">

            <el-checkbox  label="item.id"> {{item.code}}</el-checkbox>
              </el-col>
              <el-col :span="15">

            <el-input   v-model="item.title" ></el-input>
              </el-col>
              <el-col :span="6">

            <el-upload
            class="upload"
              action="https://jsonplaceholder.typicode.com/posts/"
              width="35px"
              list-type="picture-card"
            >
              <i class="uploadPictures">上传图片</i>
            </el-upload>
              </el-col>
            </el-row>
          <!-- </div> -->
      </el-form-item>
      <el-button v-if="form.questionType!=='3'" type="danger" plain :disabled="form.questionType!=='2'" class="dangerButton" @click="dangerButton"
        >+增加选择与答案</el-button
      >
      <div class="video">
        <el-form-item label="解析视频：">
          <el-input v-model="form.videoURL" style="width=80px"></el-input>
        </el-form-item>
      </div>
      <div class="analysis">答案解析:<quillEditor class="questionStem" v-model="form.answer" ></quillEditor></div>
        <el-form-item label="题目备注:" class="remark">
    <el-input class="textarea" type="textarea" v-model="form.desc"></el-input>
  </el-form-item>
  <el-form-item label="试题标签:" class="questionsLabel">
        <el-select v-model="form.tags" placeholder="请选择">
          <el-option v-for="item in labelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">{{$route.query.id?'确定修改':'确定提交'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as catalogue } from '@/api/hmmm/directorys.js'
import { simple as label } from '@/api/hmmm/tags.js'
import { list } from '@/api/hmmm/companys.js'
import { add, update, detail } from '@/api/hmmm/questions.js'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      difficulty,
      questionType,
      direction,
      subjectList: [],
      companysList: [],
      form: {
        tags: '',
        subjectID: '',
        province: '',
        city: '',
        catalogID: '',
        difficulty: '1',
        questionType: '1',
        enterpriseID: '',
        question: '',
        options: [
          { id: 3584, questionsID: 832, code: 'A', title: '', img: '', isRight: false },
          { id: 3585, questionsID: 832, code: 'B', title: '', img: '', isRight: false },
          { id: 3586, questionsID: 832, code: 'C', title: '', img: '', isRight: false },
          { id: 3587, questionsID: 832, code: 'D', title: '', img: '', isRight: false }
        ],
        videoURL: '',
        answer: ''
      },
      rules: {
        subjectID: [{ required: true, message: '请输入学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请输入目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请输入企业', trigger: 'blur' }],
        province: [{ required: true, message: '请选择城市', trigger: 'change' }],
        city: [{ required: true, message: '请选择城市', trigger: 'change' }],
        direction: [{ required: true, message: '请选择', trigger: 'change' }],
        questionType: [{ required: true, message: '请选择题型', trigger: 'change' }],
        difficulty: [{ required: true, message: '请选择难度', trigger: 'change' }]
      },
      citySelect: {
        province: [],
        cityDate: []
      },
      catalogueList: [],
      labelList: []
    }
  },
  async created () {
    const { data } = await simple()
    this.subjectList = data
    this.getCityData()
    this.handleProvince()
    const res = await list({ page: 1, pagesize: 10 })
    this.companysList = res.data.items
    if (this.$route.query.id) {
      const { data } = await detail({ id: this.$route.query.id })
      this.form = data
      this.form.forEach(item => {

      })
    }
  },
  methods: {
    inputOption (id) {
      this.form.options.forEach(item => {
        if (item.id !== id) {
          item.isRight = false
        }
      })
    },
    async onSubmit () {
      if (this.$route.query.id) {
        try {
          await update({ id: this.$route.query.id, ...this.form })
          this.$message.success('修改成功')
          this.$router.push('list')
        } catch (error) {
          console.log(error)
          this.$message.error('修改失败')
        }
      } else {
        try {
          await add(this.form)
          this.$router.push('list')
          this.$message.success('添加成功')
        } catch (error) {
          this.$message.error('请填写必选项')
        }
      }
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
    },
    dangerButton () {
      const nuwId = +this.form.options[this.form.options.length - 1].id + 1
      const ionsID = +this.form.options[0].questionsID
      const option = String.fromCharCode('A'.charCodeAt(0) + this.form.options.length)
      const obj = { id: nuwId, questionsID: ionsID, code: option, title: '', img: '', isRight: false }
      this.form.options.push(obj)
    }
  },
  watch: {
    form: {
      deep: true,
      async  handler (newval, oldval) {
        const catalogueData = await catalogue({ subjectID: newval.subjectID })
        this.catalogueList = catalogueData.data
        const labelData = await label({ subjectID: newval.subjectID })
        this.labelList = labelData.data
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  padding: 20px;
  background-color: #fff;
}
/deep/.el-input__inner {
  margin-left: 20px;
  width: 200px;
}
// .option {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   margin: 10px 0;
// }
/deep/.el-upload--picture-card {
  width: 100px;
  height: 60px;
  line-height: 60px;
}
.uploadPictures {
  font-style: normal;
  font-size: 12px;
}
.dangerButton {
  width: 122px;
  height: 30px;
  color: #fff !important;
  background-color: #fab6b6 !important;
  font-size: 12px;
  margin-left: 79px;
  margin-bottom: 20px;
}
.video{
  display: flex;
  margin-left: 50px;
  .el-form-item{
    width: 85px !important;
  }
}
.textarea{
  width: 400px;
}
.questionStem{
  width: 400px;
  margin-left: 70px;
  margin-bottom: 20px;
}
.question{
  margin-left: 40px;
}
.analysis{
  margin-left: 78px;
}
.remark{
  margin-left: 66px;
}
.questionsLabel{
  margin-left: 66px;
}
.rowStyle{
  width: 400px;
}
/deep/.el-upload--picture-card{
  width: 80px;
  height: 50px;
  margin-bottom: 10px;
}
</style>
